import Taro, { Component } from "@tarojs/taro";
import {View, Image, Text} from "@tarojs/components";
import { inject, observer } from '@tarojs/mobx'
import { IStoreProps } from '../../store/Stores'
import {getRuntime, subtime, getAvatar, getCaNumber} from '../../utils/common'

import './teamMember.less'

interface IHomeProps extends IStoreProps { }

@inject("stores")
@observer
class TeamMember extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    info: {}
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '我的团队' })
    let id = parseInt(this.$router.params.id)
    if (!id) {
      getRuntime().navigateBack(); return;
    }
    this.getUserSpreadById(id)
  }

  getUserSpreadById(id: number): void {
    let { userStore } = this.props.stores
    userStore.getUserSpreadById({
      formUserId: id,
      callback: res => { this.setState({ info: res }) }
    })
  }

  link() {}

  render() {
    let { info } = this.state
    return (
      <View className='my-my_team_member'>
        <View className='list-20-item'>
          <Image src={getAvatar(info.avatar)} className='img' />
          <View className='info'>
            <View className='list-title'>{info.name}</View>
            <View className='tel'>{info.phoneNumber}</View>
            <View className='list-info font-dark'>
              注册时间：{subtime(info.creationTime)}
            </View>
          </View>
          <View className='r'>共成交{info.teamNum}单</View>
        </View>
        <View className='interval' />

        <View className='total-order'>
          <View className='total-order__num'>成交总单数： 9999999</View>
          <View className='total-order__num'>成交总金额： 999999999</View>
        </View>
        <View className='interval' />

        <View className='list-01'>
        <View className='list-01__item' onClick={this.link.bind(this)}>
          <View className='list-01__line'>
            <View className='list-01__title'>
              <Text className='list-01__spec'>车牌号</Text>
              <Text className='list-01__spec'>规格</Text>
            </View>
            <View className='list-01__price color-theme' style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
              <Text className='small color-theme'> -￥</Text>
              <Text className='price color-theme'>5000</Text>
              <Text className='int'>|</Text>
              <Text className='price color-theme'>状态</Text>
            </View>
          </View>
          <View className='list-01__line'>
            <View className='list-01__carId color-theme'>车牌号</View>
            <View className='list-01__date font-dark'>缴费时间</View>
          </View>
        </View>
        </View>
{/*
        {
          info.privileteSta && info.privileteSta.map((item, index) => {
            return (
              <View className='item-member' key={index}>
                <View className='list-title'>{item.prvName}</View>
                <View className='list-desc color-dark'>{item.prvNum}个</View>
              </View>
            )
          })
        }*/}
      </View>
    )
  }
}

export default TeamMember
